<template>
  <div class="monitor_search">
    <div class="search_item">
      <el-select v-model="monitorState.search_form.bc_type" placeholder="平台" @change="monitorStore.changebctype" style="width: 156px">
        <el-option label="全部" value="all" />
        <el-option v-for="item in bctypes" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div class="search_item">
      <el-select v-model="monitorState.search_form.date" @change="monitorStore.changebctype" placeholder="日期" style="width: 156px">
        <el-option label="全部" value="all" />
        <el-option v-for="item in days" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <!-- <el-date-picker v-model="monitorState.search_form.date" type="date" placeholder="日期" :disabled-date="disabledDate"
        :shortcuts="shortcuts" style="width: 156px" format="YYYY-MM-DD" /> -->
    </div>
    <div class="search_item">
      <el-select multiple collapse-tags v-model="monitorState.search_form.pk_types" placeholder="盘口" style="width: 156px">
        <el-option v-for="item in monitorState.SearchHandicap" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>

    <div class="search_item">
      <el-select v-model="monitorState.search_form.league_id" filterable @change="monitorStore.changeleague" placeholder="联赛" style="width: 156px">
        <el-option label="全部" value="all" />
        <el-option v-for="item in monitorState.searchLeague" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div class="search_item">
      <el-select v-model="monitorState.search_form.match_id" placeholder="赛事" style="width: 156px">
        <el-option label="全部" value="all" />
        <el-option v-for="item in monitorState.searchMatchs" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>


    <div class="search_item search_buttons">
      <div class="search_button" @click="getsavefilter(false)" v-if="monitorState.buttonshow">查询</div>
      <div class="search_button" style="opacity: .5;" v-if="!monitorState.buttonshow">查询中...</div>
      <div class="reset_button" @click="clickreset()"  v-if="monitorState.buttonshow2">重置</div>
      <div class="reset_button" style="opacity: .5;"   v-if="!monitorState.buttonshow2">重置中...</div>
    </div>
  </div>
</template>

<script setup>
const { monitorStore, monitorState } = inject("MonitorStore");

const emits = defineEmits([])

const days = ref([])
const bctypes = computed(() => {
  let a = []
  let b = JSON.parse(localStorage.userInfo)
  if (b.products.data_feed) {
    b.products.data_feed.list.forEach(item => {
      a.push({
        value: item.attr_code,
        label: item.attr_name
      })
    });
  }

  return a
})

const getNextWeekDates = () => {
  const dates = [];
  const today = new Date();

  // 获取未来一周的日期
  for (let i = 0; i < 7; i++) {
    const futureDate = new Date(today);
    futureDate.setDate(today.getDate() + i);  // 设置未来的日期

    // 格式化日期为 "YYYY-MM-DD" 格式
    const year = futureDate.getFullYear();
    const month = String(futureDate.getMonth() + 1).padStart(2, '0');  // 月份从0开始，需要+1
    const day = String(futureDate.getDate()).padStart(2, '0');

    dates.push(`${year}-${month}-${day}`);
  }

  return dates;
}

const getsavefilter = () => {
  emits('reconnect')
  monitorStore.getsavefilter(false)
}

const clickreset = () => {
  emits('reconnect')
  monitorStore.clickreset()
}

onMounted(() => {
  let a = getNextWeekDates()
  days.value = []
  a.forEach(item => {
    days.value.push({
      value: item,
      label: item
    })
  });
  
})
</script>

<style lang="scss" scoped>

.monitor_search {
  width: 100%;
  height: 32px;
  display: flex;
}

.search_item {
  margin-right: 16px;
}

</style>

<style>
.monitor_search .el-select__wrapper {
  border-radius: 0;
  border: solid 1px #ebebeb;
  background-color: #fff;
  height: 32px;
  line-height: 32px;
  min-height: 32px;
}

.monitor_search .el-input__wrapper {
  border-radius: 0;
  background-color: #fff;
  height: 30px;
  border: solid 1px #ebebeb;
  padding: 0 10px;
}

.search_item {
  display: flex;
}

.search_buttons div {
  width: 85px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.search_button {
  background-color: #e92937;
  color: #ffffff;
}

.reset_button {
  margin-left: 8px;
  background-color: #f5f5f5;
  color: #000000;
}

.search_item .is-focused{
  box-shadow: 0 0 0 1px #e92937 inset !important;
}
</style>